<!--，商品评价表 -->
<template>
    <!-- 书写html结构 只可以有一个div 但是可以嵌套多个div  -->
    <div>
        <div id="searchData">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.productName" placeholder="——请输入商品名称——"
                              class="center-text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.userName" placeholder="——请输入用户名称——"
                              class="center-text"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="refresh" icon="el-icon-refresh">刷新</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 查询的数据指定数据 -->
        <el-table
                :data="tableData"
                style="width: 100%"
        >
            <el-table-column
                    width="100"
                    prop="product.productName"
                    label="商品"
            >
            </el-table-column>
            <el-table-column
                    width="150"
                    prop="userName"
                    label="用户"
                    :formatter="userFormatter"
            >
            </el-table-column>
            <el-table-column
                    width="120"
                    prop="content"
                    label="评价内容"
            >
            </el-table-column>
            <el-table-column
                    width="100"
                    prop="rating"
                    label="评分"
            >
            </el-table-column>
            <el-table-column
                    width="200"
                    prop="createTime"
                    label="创建时间"
            >
            </el-table-column>
<!--            <el-table-column-->
<!--                    width="200"-->
<!--                    prop="updateTime"-->
<!--                    label="更新时间"-->
<!--            >-->
<!--            </el-table-column>-->
        </el-table>

        <!--分页功能-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.currentPage"
                :page-sizes="[1,2,5,10]"
                :page-size="searchForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


    </div>
</template>
<script>
    export default {
        data() {
            return {
                searchForm: {
                    currentPage: 1, //当前页数
                    pageSize: 5,//每页的数量
                    //用来接收前端后端查出来的数据
                    productName: "",
                    userName: "",
                    userId: '',
                },
                total: 0, //总options条数
                tableData: [],

                //加载用户人（不 能用undefined）报错；
                Options: [],

                dialogFormVisible: false,


            };
        },
        //初始化数据
        created() {
            this.selectData();
            this.loadUpdateBy();
        },

        //存放方法
        methods: {
            //刷新方法
            refresh() {
                location.reload() //方法用来刷新当前页面
                this.searchForm={};
                this.searchForm.productName="";
                this.searchForm.userName="";
                this.searchForm.currentPage = 1;
                this.searchForm.pageSize = 5;
                this.selectData();

            },
            //分页查询所有信息
            selectData() {
                this.$http.post("product/review/select", this.searchForm).then(result => {
                    this.tableData = result.data.data.records;
                    this.total = result.data.data.total;
                })
            },

            // //获取所有的用户更新人和创建人
            // loadUpdateBy() {
            //     this.$http.get("/user/people/api/selectAll", this.searchForm).then(result => {
            //         // console.log("@@@@@@@@",this.searchForm);
            //         console.log("@@@@@@@@restult",result)
            //
            //         this.Options = result.data.data;
            //     })
            // },
            //获取所有的用户更新人和创建人
            loadUpdateBy() {
                this.$http.get("/saleManagement/vip/findUserStatic").then(result => {
                    this.Options = result.data.data;
                })
            },
            //从查到的用户信息中查询对应userid的姓名
            userFormatter(row) {
                for (let i = 0; i < this.Options.length; i++) {
                    if (row.userId === this.Options[i].userId) {
                        return this.Options[i].userName;
                    }
                }
            },


            //搜索
            search() {
                this.selectData();
            },
            //每页数量发生变化
            handleSizeChange(val) {
                this.searchForm.pageSize = val;
                this.selectData();
            },
            //页码发生变化
            handleCurrentChange(val) {
                this.searchForm.currentPage = val;
                this.selectData();
            },


        },
    };
</script>